<nz-card>
  <h2>基础信息</h2>
  <nz-row class="row">
    <span class="label required">名称</span>
    <input type="text" placeholder="请输入" style="width: 400px" nz-input maxlength="50" [(ngModel)]="formData.name"/>
  </nz-row>
  <nz-row class="row">
    <span class="label">69码</span>
    <input type="text" placeholder="请输入" maxlength="20" nz-input [(ngModel)]="formData.code">
  </nz-row>
  <nz-row class="row">
    <span class="label required">状态</span>
    <nz-radio-group [(ngModel)]="formData.state">
      <label nz-radio [nzValue]="1">启用</label>
      <label nz-radio [nzValue]="0">禁用</label>
    </nz-radio-group>
  </nz-row>
  <nz-row class="row">
    <span class="label selfTop">商品图片</span>
    <app-image-upload style="width: 250px;display: inline-block"
                      [maxImgLength]="1"
                      [imageUrl]="formData.img"
                      (deleteImg)="formData.img=''"
                      (urlChange)="formData.img=$event"></app-image-upload>
  </nz-row>
  <nz-row class="row">
    <span class="label selfTop">备注</span>
    <textarea nz-input
              [maxLength]="100"
              [(ngModel)]="formData.remark"
              placeholder="仅内部可见"
              [nzAutosize]="{ minRows: 2, maxRows: 6 }"
    ></textarea>
  </nz-row>

  <h2>详细信息</h2>
  <nz-row class="row">
    <span class="label required">分类</span>
    <!--    <nz-tree-select nzVirtualHeight="500px" [(ngModel)]="formData.type" [nzNodes]="goodsTypeList" nzShowSearch-->
    <!--                    nzDefaultExpandAll nzPlaceHolder="请选择">-->
    <!--    </nz-tree-select>-->
    <nz-cascader [nzOptions]="goodsTypeList" nzPlaceHolder="请选择" [nzChangeOnSelect]="true" [(ngModel)]="formData.type"
                 [nzDisabled]="isEdit"></nz-cascader>

  </nz-row>
  <nz-row class="row">
    <span class="label required">品牌</span>
    <nz-select nzPlaceHolder="请选择" [(ngModel)]="formData.brandId" [nzDisabled]="isEdit">
      <nz-option [nzValue]="data.id" [nzLabel]="data.name" *ngFor="let data of brandList">
      </nz-option>
    </nz-select>
  </nz-row>
  <nz-row class="row">
    <span class="label required">单位</span>
    <nz-select nzPlaceHolder="请选择" [(ngModel)]="formData.stockUnit">
      <nz-option *ngFor="let item of unitList" [nzValue]="item.value*1"
                 [nzLabel]="item.label">
      </nz-option>
    </nz-select>
  </nz-row>
  <nz-row class="row">
    <span class="label">保质期</span>
    <nz-input-group style="width: 160px" nzAddOnAfter="天">
      <nz-input-number nzPlaceHolder="请输入" style="width: 100%" [nzMin]="1" [nzMax]="36500" [nzPrecision]="0"
                       [(ngModel)]="formData.shelfLife"></nz-input-number>
    </nz-input-group>
  </nz-row>
  <nz-row class="row">
    <span class="label">重量</span>
    <nz-input-group style="width: 160px" nzAddOnAfter="kg">
      <nz-input-number nzPlaceHolder="请输入" style="width: 100%" [nzMin]="1" [nzMax]="999" [nzPrecision]="3"
                       [(ngModel)]="formData.weight"></nz-input-number>
    </nz-input-group>
  </nz-row>
  <nz-row class="row">
    <span class="label selfTop">附件</span>
    <nz-upload [nzAccept]="'image/*,.pdf,.txt,.xls,.xlsx,.doc,.docx,.ppt,.pptx'"
               [nzBeforeUpload]="beforeUpload">
      <button nz-button>
        选择文件
      </button>
      <span>请选择图片、office文件、PDF文件</span>
    </nz-upload>
  </nz-row>
  <nz-row class="row">
    <span class="label"></span>
    <span>
      <div *ngFor="let file of formData.enclosure;let index=index" class="fileRow">
        <span class="fileUrl" nz-tooltip [nzTooltipTitle]="file">
       {{file}}
        </span>
        <a class="fileDownload" [href]="file" target="_blank">下载</a>
        <i class="fileDelete" nz-icon nzType="delete" (click)="removeFile(index)" nzTheme="outline"></i>
      </div>
    </span>
  </nz-row>

  <h2>采购信息</h2>
  <nz-row class="row">
    <span class="label required">税率</span>
    <nz-input-group style="width: 120px" nzAddOnAfter="%">
      <nz-input-number nzPlaceHolder="请输入" style="width: 100%" [nzMin]="0" [nzMax]="100" [nzPrecision]="0"
                       [(ngModel)]="formData.taxRate"></nz-input-number>
    </nz-input-group>
  </nz-row>
  <nz-row class="row">
    <span class="label">成本价(不含税)</span>
    <nz-input-number nzPlaceHolder="请输入" [nzMin]="1" [nzMax]="9999999" [nzPrecision]="4"
                     [(ngModel)]="formData.costPrice"></nz-input-number>
  </nz-row>
  <nz-row class="row">
    <span class="label">标准成本价(含税)</span>
    <nz-input-number nzPlaceHolder="请输入" [nzMin]="1" [nzMax]="9999999" [nzPrecision]="4"
                     [(ngModel)]="formData.standardCostPrice"></nz-input-number>
  </nz-row>
  <nz-row class="row">
    <span class="label">最高成本价(含税)</span>
    <nz-input-number nzPlaceHolder="请输入" [nzMin]="1" [nzMax]="9999999" [nzPrecision]="4"
                     [(ngModel)]="formData.highestCostPrice"></nz-input-number>
  </nz-row>
  <h2>库存安全</h2>
  <nz-row class="row">
    <span class="label">预警值</span>
    <nz-input-number nzPlaceHolder="请输入" [nzMin]="1" [nzMax]="9999999" [nzPrecision]="0" style="width: 100px"
                     [(ngModel)]="formData.earlyWarning"></nz-input-number>
  </nz-row>
  <nz-row class="row">
    <span class="label required">SN管控</span>
    <nz-radio-group [(ngModel)]="formData.snState" [nzDisabled]="isEdit">
      <label nz-radio [nzValue]="0">启用</label>
      <label nz-radio [nzValue]="1">禁用</label>
    </nz-radio-group>
  </nz-row>

  <h2>BOM信息</h2>
  <nz-table #basicTable
            style="width: 1200px"
            [nzPageSize]="9999"
            nzShowPagination="false"
            nzOuterBordered="true"
            [nzData]="formData.bomList">
    <thead>
    <tr>
      <th nzAlign="center">序号</th>
      <th nzAlign="center">商品名称</th>
      <th nzAlign="center">状态</th>
      <th nzAlign="center">编码</th>
      <th nzAlign="center">69码</th>
      <th nzAlign="center">数量</th>
      <th nzAlign="center">操作</th>
    </tr>
    </thead>
    <tbody>
    <tr *ngFor="let data of basicTable.data;let index=index">
      <td nzAlign="center">{{ index + 1 }}</td>
      <td nzAlign="center">{{ data['name'] }}</td>
      <td nzAlign="center">{{ data['state'] === 1 ? '启用' : '禁用' }}</td>
      <td nzAlign="center">{{ data['goodsCode'] }}</td>
      <td nzAlign="center">{{ data['code'] }}</td>
      <td nzAlign="center">
        <nz-input-number nzPlaceHolder="请输入" [nzMin]="1" [nzMax]="9999999" [nzPrecision]="0"
                         [(ngModel)]="data['num']"></nz-input-number>
      </td>
      <td nzAlign="center">
        <i (click)="removeCommodity(index)" nz-icon nzType="delete" style="color: red;" nzTheme="outline"></i>
      </td>
    </tr>
    <tr (click)="showBomTable()">
      <td colspan="9" nzAlign="center">
        <i nz-icon nzType="plus" nzTheme="outline"></i>
        选择更多商品
      </td>
    </tr>
    </tbody>
  </nz-table>
  <div style="margin-top: 8px">
    <button nz-button nzType="default" routerLink="/storage-center/storageCommodityInfo" style="margin-right: 8px">取消
    </button>
    <button nz-button nzType="primary" nz-popconfirm nzPopconfirmTitle="【商品分类、商品品牌、SN管控】后续不能修改，请注意不要填写错误"
            (nzOnConfirm)="save()">保存
    </button>
  </div>
</nz-card>

<!--BOM查询表格-->
<nz-modal
  [nzVisible]="bomModal.visible"
  nzTitle="BOM"
  [nzFooter]="null"
  nzWidth="800px"
  (nzOnCancel)="bomModal.visible=false">
  <div *nzModalContent>
    <div>
      <div class="searchItem">
        <span class="label">商品</span>
        <input nz-input placeholder="编码/69码/名称" [(ngModel)]="bomModal.whGood"/>
      </div>
      <span class="optionBtn">
        <button nz-button nzType="primary" (click)="bomQueryBtn()">查询</button>
        <button nz-button nzType="default" (click)="bomResetCondition()">重置</button>
        <button nz-button nzType="primary" (click)="relevance()">关联已选商品</button>
      </span>
    </div>

    <!--表格-->
    <nz-table
      #rowSelectionTable
      nzSize="small"
      nzTableLayout="fixed"
      nzShowSizeChanger
      nzShowQuickJumper
      nzOuterBordered
      [nzData]="bomModal.listOfData.records"
      [nzPageSizeOptions]="[5, 10, 20, 50, 100]"
      [nzTotal]="bomModal.listOfData.total"
      [(nzPageIndex)]="bomModal.page"
      [(nzPageSize)]="bomModal.pageSize"
      [nzFrontPagination]="false"
      [nzShowTotal]="totalTemplate"
      (nzPageIndexChange)="bomOnPageIndexChange($event)"
      (nzPageSizeChange)="bomOnPageSizeChange($event)"
    >
      <thead>
      <tr>
        <th [nzChecked]="checked" [nzIndeterminate]="indeterminate" (nzCheckedChange)="onAllChecked($event)"
            nzLeft></th>
        <th nzAlign="center">商品编号</th>
        <th nzAlign="center">商品名称</th>
        <th nzAlign="center">69码</th>
        <th nzAlign="center">分类</th>
        <th nzAlign="center">品牌</th>
        <th nzAlign="center">状态</th>
      </tr>
      </thead>
      <tbody>
      <tr *ngFor="let data of rowSelectionTable.data;let index=index;"
          [ngStyle]="{color: data['state']===0?'#999999':''}">
        <td [nzChecked]="setOfCheckedId.has(data['id'])"
            (nzCheckedChange)="onItemChecked(data['id'], $event)"
        ></td>
        <td nzAlign="center">{{ data['goodsCode'] }}</td>
        <td nzAlign="center">{{ data['name'] }}</td>
        <td nzAlign="center">{{ data['code'] }}</td>
        <td nzAlign="center">{{ data['typeName'] }}</td>
        <td nzAlign="center">{{ data['brandName'] }}</td>
        <td nzAlign="center">{{ data['state'] === 1 ? '启用' : '禁用' }}</td>
      </tr>
      </tbody>
    </nz-table>
    <!-- 分页template -->
    <ng-template #totalTemplate let-total>共有 {{ total }} 条</ng-template>
  </div>
</nz-modal>
